<template>
	<view class="root-page">
		<view class="header-comp">
			<view class="header">
				<view class="header-bar">
					<view class="product-page-header maxW maxF" :style="`background: ${background};`">
						<image src="../../static/images/left.png" class="header-icon" mode="" @click="Back"></image>
						<view class="header-content">
							<text class="fz32 " style="color: rgb(255, 255, 255);">
								小米上新
							</text>
							<image src="../../static/images/confirm-attention.png" class="attention" mode=""></image>
							<image src="../../static/images/jin.gif" mode="" class="mi-gif" @click="toCalendar"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="section gallery">
			<u-swiper :list="swiperList" keyName='img_url' :indicator='true' @click='clickSwiper'
				indicatorInactiveColor='rgba(255, 255, 255, 0.15)' indicatorMode='dot'
				indicatorActiveColor='rgba(255, 255, 255, 0.5)'></u-swiper>
		</view>
		<block v-for="(item,index) in dataList" :key="index">
			<template v-if="item.view_type=='cells_auto_fill'">
				<view class="section cell_auto_fill multi_cell"
					:style="`background-color:${item.body.bg_color}; height: ${(item.body.h)/100}rem;`">
					<block v-for="(child,childIndex) in item.body.items" :key="childIndex">
						<view class="img-box" @click="getCellItem(child)"
							:style="`height: ${(child.h)/100}rem; width: ${(child.w)/100}rem;left:${(child.x)/100}rem;top:${(child.y)/100}rem;`">
							<image :src="child.img_url" mode="widthFix">
							</image>
						</view>
					</block>
				</view>
			</template>
			<template v-if="item.view_type=='divider_line'">
				<view class="section divider_line"></view>
			</template>
			<template v-if="item.view_type=='list_one_type19'">
				<view class="section list_one_type19">
					<view class="J_linksign-customize" style="background: rgb(242, 242, 242);">
						<view class="list-item">
							<view class="product-info" @click="getListItem(item)">
								<LazyLoad :src="item.body.items[0].img_url" width='1.8rem' height='1.8rem'></LazyLoad>
								<view class="item-right">
									<view class="fz32 text-ellipsis">
										{{item.body.items[0].product_name}}
									</view>
									<view class="product-tip text-ellipsis">
										{{item.body.items[0].product_brief}}
									</view>
									<view class="product-label">
										<text class="label" v-for="(tag,tagIndex) in item.body.items[0].custom_tag"
											:key="tagIndex">{{tag}}</text>
									</view>
									<view class="other-info">
										<view class="product-price">
											<text class="fz24">
												￥
											</text>
											<text class="text">{{item.body.items[0].product_price}}</text>
										</view>
										<view class="btn">
											{{item.body.items[0].btn_txt}}
										</view>
									</view>
								</view>
							</view>
							<view class="mi-zone" @click="toMicDetail(item)">
								<view>
									<view class="" style="display: flex; line-height: 0.36rem;">
										<view class="" style="flex: 1 1 0%;">
											<text class="fz28" style="margin-right: .1rem;">米圈</text>
											<text class="gray">大家都在问</text>
										</view>
										<view class="gray el-flex">
											<image src="../../static/images/fire.png" class="icon-hot icon" mode="">
											</image>
											<text>热度 {{item.body.items[0].mizone_ext.hot_value}}</text>
										</view>
									</view>
									<view class="" style="display: flex; margin-top: 0.19rem; line-height: 0.32rem;">
										<view class="question-swiper ">
											<image src="../../static/images/wenda.png" class="icon-ask icon" mode="">
											</image>
											<template
												v-if="item.body.items[0].mizone_ext&&item.body.items[0].mizone_ext.question">
												<swiper :autoplay="true" easing-function='easeInOutCubic'
													:interval="5000" :duration="1000" circular>
													<swiper-item
														v-for="(swiper,swiperIndex) in item.body.items[0].mizone_ext.question"
														:key="swiperIndex">
														<view class="swiper-item ">
															<text class="text-ellipsis">{{swiper}}</text>
														</view>
													</swiper-item>
												</swiper>
											</template>
										</view>
										<view class="gray el-flex">
											<view class="imgs">
												<block
													v-for="(img,imgIndex) in item.body.items[0].mizone_ext.user_avatar"
													:key="imgIndex">
													<image
														:style="`transform: translateX(-0.${imgIndex}rem); position: relative; top: -0.04rem;`"
														:src="img" mode=""></image>
												</block>
											</view>
											<view class="text">
												快来互动吧 >
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</template>
		</block>
	</view>
</template>
<script>
	import LazyLoad from '../../components/LazyLoad/LazyLoad.vue'
	export default {
		data() {
			return {
				dataList: [],
				background: 'transparent'
			};
		},
		components: {
			LazyLoad
		},
		computed: {
			swiperList() {
				let info = this.dataList.find(item => {
					return item.view_type === "gallery_custom"
				})
				return info && info.body.items
			}
		},
		onPageScroll(res) {
			if (res.scrollTop >= 100) {
				this.background = 'rgb(253, 103, 0)'
			} else {
				this.background = 'transparent'
			}
		},
		methods: {
			toCalendar(){
				uni.navigateTo({
					url: `/secPage/new_product_calendar/new_product_calendar`
				})
			},
			clickSwiper(e) {
				let item = this.swiperList[e]
				let action = item.action
				if (action.productId && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.productId}`
					})
				} else if (action.path && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.path}`
					})
				}
			},
			toMicDetail(item) {
				let id = item.body.items[0] && item.body.items[0].product_id
				if (id) {
					uni.navigateTo({
						url: `/secPage/micircle/micircle?product_id=${id}`,
					})
				}

			},
			Back() {
				uni.navigateBack(-1)
			},
			getListItem(item) {
				this.getCellItem(item.body.items[0])
			},
			getCellItem(item) {
				let action = item.action
				if (action.productId && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.productId}`,
					})
				} else if (action.path && action.type == "product") {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${action.path}`,
					})
				} else if (action.type == "new_product_list") {
					uni.navigateTo({
						url: `/secPage/new_product/new_product`,
					})
				}
			},
			getProductChannelPage() {
				this.$request.get('/getProductChannelPage').then((res) => {
					this.dataList = res.data.data.sections
				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		onLoad() {
			this.getProductChannelPage()
		}
	}
</script>

<style lang="scss" scoped>
	.product-page-header {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 0.88rem;
		z-index: 1000;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		align-items: center;

		.header-icon {
			height: 0.48rem;
			width: 0.48rem;

			padding: 0 0.32rem;
			vertical-align: middle;
		}

		.header-content {
			-webkit-box-flex: 1;
			-ms-flex: 1;
			flex: 1 1 0%;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;

			.fz32 {
				font-size: .32rem;
				color: rgb(51, 51, 51);
				margin: 0 0.08rem;
				font-weight: 700;
			}
		}

		.attention {
			width: 1.27rem;
			height: 0.65rem;
		}

		.mi-gif {
			position: absolute;
			right: 0.19rem;
			top: 0.04rem;
			width: 0.8rem;
			height: 0.8rem;
		}
	}


	.section {}

	.gallery {}

	.root-page {
		view {
			line-height: 1.15;
			font-size: .2rem;
		}

		.u-swiper,
		/deep/.u-swiper__wrapper__item__wrapper__image,
		/deep/.u-swiper__wrapper__item,
		/deep/.u-swiper__wrapper,
		/deep/.uni-swiper-slide-frame,
		/deep/.uni-swiper-slides,
		/deep/.uni-swiper-wrapper {
			width: 7.2rem;
			height: 4.86rem !important;
		}


		image {
			display: block;
			width: 100%;
			vertical-align: middle;
		}
	}

	.cell_auto_fill {
		.img-box {
			display: block;
			margin: 0 auto -1px;
			overflow: hidden;

			image {
				display: block;
				width: 100%;
				vertical-align: middle;
			}
		}
	}

	.multi_cell {
		position: relative;

		.img-box {
			position: absolute;
			display: block;
			height: auto !important;
		}
	}

	.divider_line {
		background-color: rgb(242, 242, 242);
		height: 0.3rem;
	}

	.list_one_type19 {
		.J_linksign-customize {
			background: rgb(242, 242, 242);

			.list-item {
				width: 6.6rem;
				margin: 0 auto;
				box-sizing: border-box;
				background: #fff;
				border-radius: 0.08rem;
				padding: 0.24rem 0.24rem 0;
				position: relative;

				.product-info {
					display: flex;
					min-height: 2.73rem;
					position: relative;

					/deep/.muqian-content {
						margin-right: 0.2rem;
					}

					.product-img {
						height: 1.8rem;
						width: 1.8rem;
						margin-right: 0.2rem;
					}

					.item-right {
						-webkit-box-flex: 1;
						-ms-flex: 1;
						flex: 1;
						text-align: left;

						.fz32 {
							width: 4.2rem;
							font-size: .32rem;
							font-weight: 600;
						}

						.product-tip {
							white-space: normal;
							margin: 0.05rem 0 0.14rem;
							font-size: .24rem;
							color: rgba(0, 0, 0, .47);
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							height: 0.7rem;
							width: 4.2rem;
						}

						.product-label {
							margin-bottom: 0.16rem;

							.label {
								font-size: .2rem;
								color: #e2a03e;
								border: 0.01rem solid #e19f3e;
								padding: 0.04rem 0.08rem;
								margin-right: 0.16rem;
								border-radius: 0.08rem;
							}
						}

						.other-info {
							width: 4.2rem;
							display: flex;
							position: absolute;
							bottom: 0.28rem;

							.product-price {
								-webkit-box-flex: 1;
								flex: 1;

								height: 0.36rem;
								line-height: .36rem;
								transform: translateY(0.2rem);

								.fz24 {
									font-size: .24rem;
									color: #ff5934;
									margin-right: .08rem;
								}

								.text {
									margin: 0px -4px;
									font-size: .36rem;
									color: #ff5934;
								}
							}

							.btn {
								height: 0.56rem;
								line-height: .56rem;
								text-align: center;
								color: #ff5934;
								font-size: .28rem;
								border: 0.01rem solid #ff5934;
								border-radius: 0.28rem;
								margin-right: 0.1rem;
								padding: 0 0.2rem;
							}
						}
					}
				}

				.mi-zone {
					border-top: 1px solid #d8d8d8;
					padding: 0.26rem 0 0.31rem;
					color: #212121;

					.fz28 {
						font-size: .28rem;
						font-weight: 600;
					}

					.gray {
						color: #606060;

						.icon-hot {
							width: 0.24rem;
							height: 0.24rem;
							margin-right: .05rem;
							transform: translateY(-0.02rem);
						}
					}

					.question-swiper {
						-webkit-box-flex: 1;
						-ms-flex: 1;
						flex: 1;
						overflow: hidden;
						position: relative;

						/deep/uni-swiper {
							float: right;
							margin-right: 0.1rem;
							width: 87%;
							height: 0.34rem !important;

							.uni-swiper-wrapper,
							.uni-swiper-slides,
							.uni-swiper-slide-frame {
								width: 100%;
								height: 0.34rem !important;
							}

							uni-swiper-item {
								height: 0.34rem !important;
								display: flex;
								align-items: center;
							}

							/deep/.swiper-item {
								width: 100%;
								height: 0.34rem;
								overflow: hidden;

								text {
									line-height: 0.32rem;
								}
							}
						}

						.icon-ask {
							position: absolute;
							top: 0.05rem;
							width: 0.29rem;
							height: 0.29rem;
							transform: translateY(-0.04rem);
						}
					}

					.imgs {
						display: inline;

						image {
							display: inline-block;
							width: 0.32rem;
							height: 0.32rem;
							border-radius: 50%;
						}
					}
				}
			}

		}
	}
</style>